<template>
	<view class="edit">
			
			<u-cell-group>
				<u-cell @click='changeHead' value='修改头像' class="cimg">
					<template #icon>
						<image  :src=userinfo.avatar    mode="scaleToFill"></image>
						<!-- <image v-else :src="form.avatar" mode="scaleToFill"></image> -->
					</template>
				</u-cell>

				<u-gap height="15" bg-color="#f9f9f9"></u-gap>
				<u-cell title="用户名" :value="userinfo.userName"></u-cell>
				<u-cell title="手机号" :value="userinfo.phonenumber"></u-cell>
				<u-gap height="15" bg-color="#f9f9f9"></u-gap>
				<u-cell title="昵称" >
					<template #right-icon>
						<up-input
						    inputAlign='right'
						    border="none"
						    v-model="from.nickName"
							@blur="fixname"
						  ></up-input>		
					</template>
				</u-cell>
				<u-cell title="邮箱" >
					<template #right-icon>
						<up-input
						inputAlign='right'
						    border="none"
						    v-model="from.email"
							@blur="flxemail"
						  ></up-input>		
					</template>
				</u-cell>
				<u-cell title="性别" :value="sex"></u-cell>
			
				<u-gap height="15" bg-color="#f9f9f9"></u-gap>

			</u-cell-group>
	</view>
</template>

<script setup>
import { computed ,onMounted,ref } from 'vue';
import {fixinfo,getinfo} from '../../../api/useraApi.js'
import {userde} from '@/mock/home.js';

	const from = ref({
		avatar:'',
		nickName:'',
		email:''
	})
	const sex =ref('')      //性别
    const file =ref({})     //文件
	const userinfo=ref({})  //个人信息列表
    
	//失去焦点修改邮箱
	const flxemail=()=>{
		
		if(from.value.email==''){
			uni.showToast({
				title:'内容不能为空',
				icon:'error'
			})
			return
		}
		
		let data = {email:from.value.email}
		makefix(data)
	}
	
	
	//失去焦点修改昵称
	const fixname=()=>{
		console.log(from.value.nickName);
		if(from.value.nickName==''){
			uni.showToast({
				title:'内容不能为空',
				icon:'error'
			})
			return
		}
		
		let data = {nickName:from.value.nickName}
		makefix(data)
	}
	
   //修改个人信息
	const makefix =async(data)=>{
		  
	 let res=await fixinfo({
		header:{
		  "Authorization":uni.getStorageSync('token')
		},
		data:{
		  ...data
		 }
		})
		
		if(res.code==200){
			uni.showToast({
				title:'修改成功'
			})
		}
	}
	
	//点击修改头像文件上传
	const changeHead=()=>{
		//选择图片 获取file地址
		uni.chooseImage({
			 count: 1, 
			 success: (res)=> {
			 file.value = res.tempFilePaths[0]
			 from.value.avatar=res.tempFilePaths[0]
			 console.log(file.value);
			 console.log(res);
			 
		//图片地址上传  获取网络地址
			 uni.uploadFile({
			 	url: 'http://124.93.196.45:10001/prod-api/common/upload', //接口地址
			 	filePath:res.tempFilePaths[0],
			 	name: 'file',
			 	header:{
			 	"Authorization":uni.getStorageSync('token')
			 	},
			 	formData:{},
			 	success: async(res) => {
			      //上传成功 渲染页面 修改接口
			 	
			 	let data =JSON.parse(res.data)
			 	from.value.avatar='http://124.93.196.45:10001/prod-api'+data.fileName
			   
			   let  src={avatar:data.fileName}
			   
			   makefix(src)
			 	
			 	}
			 })
			 
		 }
		})	
		 
	}
	
	//显示男女
	const seesex=()=>{

		if(Number(userinfo.sex) ==1){
			sex.value='女'
			
		}else{
			sex.value='男'
		}
	}
	
	//获取个人信息
	const getinfodata=async()=>{
		let res =await getinfo({
			header:{
			"Authorization":uni.getStorageSync('token')
			},
			data:{}
		})
	
		if(res.code==200){
			userinfo.value=res.user
			from.value.nickName=res.user.nickName
            from.value.email=res.user.email
			
			if(res.user.avatar==''){
				from.value.avatar='../../static/center4/avatar.png'
			}else{
				from.value.avatar='http://124.93.196.45:10001/prod-api'+res.user.avatar
			}
		}else{
	    //静态模拟的数据
		userinfo.value=userde()
		from.value.nickName=userde().nickName
		from.value.email=userde().email
		
	}
		
		
		console.log(userinfo.value);
	}
	
	onMounted(()=>{
		getinfodata()
		seesex()
	})
</script>

<style lang="scss">
	.edit{
		width: 100%;
		
		::v-deep uni-image	{
			width: 60px;
			height: 60px;
		}
		.cimg{
			cursor: pointer;
		}
		.but{
			padding: 0px 10px;
		}
		
		
	}


</style>